<template>
  <div class="about">
    <h1>Vue3生命周期</h1>
    <div id="dom">{{msg}}</div>
    <div><button v-on:click="handleClick">点击我</button></div>
    <input type="text" placeholder="输入电话" v-model="userPhone"
    @focus="handleFaus" @change="handleChange" @blur="handleBlur">
    <input type="text" placeholder="请输入的你的姓名" v-model="username">
    <textarea placeholder="请输入你的建议" cols="30" rows="30" v-model="userinput"></textarea>
    <button type="submit" @click="submit">提交</button>
  </div>
</template>
<script>
import {reactive,toRefs,onMounted,onBeforeMount,onBeforeUpdate,onUpdated} from "vue";
export default {
  name:"about",
  setup(){
    const data = reactive({
      msg:"你好",
      username:"",
      userinput:"",
      userPhone:"",
    })
    //数据渲染前行为
    onBeforeMount(()=>{
      console.log("onBeforeMount",document.querySelector("#dom"));
    })
    //数据渲染后行为
    onMounted(()=>{
      console.log("onMounted",document.querySelector("#dom"));
      setTimeout(()=>{
        data.msg="hello"
      },2000)
    })
    //dom更新前行为
    onBeforeUpdate(()=>{
      console.log("onBeforeUpdate",document.querySelector("#dom"));
    })
    //dom更新后行为
    onUpdated(()=>{
      console.log("onUpdated",document.querySelector("#dom"));
    })
    const handleClick=()=>{
      alert("你好！")
    }
    const submit=()=>{
      alert(`${data.username}的建议：${data.userinput}`)
    }
    const handleFaus=()=>{
      console.log("获取焦点")
    }
    const handleChange=()=>{

    }
    const handleBlur=()=>{
      console.log("失去焦点")
      if (!data.userPhone){
        alert("手机号未填")
      }
    }
    return{
      ...toRefs(data),handleClick,submit,handleFaus,handleChange,handleBlur
    }
  }
}
</script>
